<template>
  <div style="height: 100%">
    <el-row class="nav">
      <span class="font-weight">通知设置</span>
    </el-row>
    <el-divider style="margin-bottom:10px;"></el-divider>
    <el-row>
      <div class="font-weight">
        <el-button
              type="text"
              class="handle-pointer"
              :class="[ setNoticeType === '1' ? 'type-menu' :'menu-color']"
              size="medium"
              @click="changeSetType('1')">通知设置</el-button>
        <el-button
              type="text"
              class="filter-button handle-pointer"
              :class="[ setNoticeType === '2'? 'type-menu' :'menu-color']"
              size="medium"
              @click="changeSetType('2')">&nbsp;|&nbsp;&nbsp;通知模板维护</el-button>
      </div>
    </el-row>
    <el-row>
      <setNotification v-if="setNoticeType === '1'"></setNotification>
      <noticeTemplateDefend v-if="setNoticeType === '2' "></noticeTemplateDefend>
    </el-row>
  </div>
</template>

<script>
  import setNotification from './setNotification'
  import noticeTemplateDefend from './noticeTemplateDefend'
  export default {
    data () {
      return {
        setNoticeType: this.$store.state.setNoticeType,
      }
    },
    components: {
      setNotification,
      noticeTemplateDefend
    },
    methods: {
      search () {
      },
      create () {
      },
      changeSetType (data) {
        this.setNoticeType = data
        this.$store.commit('setNoticeIdFun', data)
      }
    }
  }
</script>
<style scoped>
  .title {
    padding: 12px 20px;
    color: #b50029;
  }
  .search {
    margin-left: 20px;
  }
  .type-menu {
    font-weight: 600;
  }
  .menu-color {
    color: #8f8f91;
    font-weight: normal;
  }
   .el-button > i {
    font-size: 13px;
    margin-right: 10px;
  }
  .filter-button {
    /* margin-left: 0; */
  }
  .el-pagination {
    text-align: right;
  }
  .font-weight {
    /* height: 16px; */
  }
</style>
